<!-- frontend/src/views/goods/components/BasicInfo.vue -->
<script setup>
// 定义props，用于接收父组件传递过来的数据
const props = defineProps({
  goods: {
    type: Object,
    required: true
  }
})
console.log(props.goods)
const formatPrice = (price) => {
  return parseFloat(price).toFixed(2)
}
</script>
<template>
  <div class="basic-info">
    <h2 class="title">{{ goods.title }}</h2>
    <div class="subtitle">{{ goods.subtitle }}</div>
    <div class="price">¥{{ formatPrice(goods.price) }}</div>
    <!-- el-divider 分割线 -->
    <el-divider />
    <!-- 商品详情 -->
    <el-descriptions :column="1" border>
      <el-descriptions-item label="商品编号">{{ goods.id }}</el-descriptions-item>
      <el-descriptions-item label="商品名称">{{ goods.title }}</el-descriptions-item>
      <el-descriptions-item label="商品副标题">{{ goods.subtitle }}</el-descriptions-item>
      <el-descriptions-item label="价格">
        <span class="price-text">¥{{ formatPrice(goods.price) }}</span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>



<style lang="scss" scoped>
.basic-info {
  .title {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .subtitle {
    color: #666;
    margin-bottom: 15px;
  }

  .price {
    font-size: 28px;
    color: #ff6b6b;
    font-weight: bold;
  }

  .price-text {
    color: #ff6b6b;
    font-weight: bold;
  }
}
</style>
